<template>
    <div id="index">
      <!-- 全屏显示 -->
      <div class="btn">
        <span  style="color:#918F8F" >
          <!-- <img :src="isFullFlag" style="vertical-align:middle"/> -->
          <el-button type="primary" icon="el-icon-monitor" plain size="mini"
          style="margin-bottom: 5px" id="full">全屏显示</el-button>
        </span>
      </div>
      <div class="cockpit" id="content">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="container" style="width: 100%">
          <!-- 顶部 -->
          <el-row>
    <el-col :span="6"><div class="grid-content bg-purple">
      <div class="time" >
              <dv-decoration-10 class="d-flex jc-center" style="height:5px" />
              <p class="now_time" style="color: #fff;" v-html="formateTimeStamp(date)"></p>
            </div>
    </div></el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple-light">
        <el-row>
   <el-col :span="7"><div class="grid-content bg-purple">
   <div class="cenleft cf1">
  <dv-decoration-8 :color="['#568aea', '#568aea']" class="d-flex jc-center" style="width:230px;height:50px;" />
  </div>
  </div></el-col>
  
   <el-col :span="8"><div class="grid-content bg-purple-light">
     <div class="cenleft cf2" style="text-align:center; height: 50px; display:flex;justify-content: center; ">
   <h1 style="font-size: 30px; font-style: normal; color: #fff;  ">莱尼尔办公室
    <dv-decoration-5 style="width:270px;height:40px;" :color="['#568aea', '#568aea'] " /></h1>
   
   </div>
   </div></el-col>
  <el-col :span="7"><div class="grid-content bg-purple">
   <div class="cenleft cf3">
     <dv-decoration-8 :color="['#568aea', '#568aea']" :reverse="true" style="width:230px;height:50px;" /> </div>
     </div></el-col>
     
  </el-row>
    </div>
  </el-col>
    <el-col :span="6"><div class="grid-content bg-purple">
      <dv-decoration-10 class="dv-dec-10-s" style="height:5px" />
    </div></el-col>
  </el-row>
          <!-- <div class="title" style="margin-top: 20px">
            <div class="time" style="width: 33.3%; ">
              <dv-decoration-10 class="d-flex jc-center" style="height:5px" />
              <p class="now_time" style="color: #fff;" v-html="formateTimeStamp(date)"></p>
            </div>
            <dv-decoration-8 :color="['#568aea', '#568aea']" class="d-flex jc-center" style="width:300px;height:50px;" />
            <div class="title_name">
             
              <h1 style="font-style: normal; color: #fff; ">莱尼尔办公室</h1>
              <dv-decoration-5  :dur=2 class="tit_center" :color="['#568aea', '#568aea']" />
              <div  style="width:300px;height:10px;" >
               
                </div>
                
  
            </div>
            <dv-decoration-8 :color="['#568aea', '#568aea']" :reverse="true" style="width:300px;height:50px;" />
            <dv-decoration-10 class="dv-dec-10-s" style="width: 33.3%;height:5px" />
           
           
          </div> -->
          </div>
          <!-- 订单 -->
          <!-- <div class="border-box-content" style="margin-top: 20px">
            <dv-border-box-12>
              <span>今日订单信息</span>
              <div id="order">
                <dv-scroll-board :config="config2" style="width:100%;height:90px;" />
                <dv-scroll-board :config="config1" style="width:100%;height:140px;" />
              </div>
            </dv-border-box-12>
          </div> -->
          <!-- 第二行 -->
          <div class="content1" style="margin-top: 20x">
            <div class="border-box-content">
              <dv-border-box-10>
                <span>百叶箱测光照</span>
                <div id="light" style="width: 100%; height: 90%"></div>
              </dv-border-box-10>
            </div>
            <div class="border-box-content">
              <dv-border-box-10 style="width: 100%">
                <span>百叶箱测温度</span>
                <div id="oil" style="width: 100%; height: 90%"></div>
              </dv-border-box-10>
            </div>
            <div class="border-box-content">
              <dv-border-box-10>
                <span>百叶箱测湿度</span>
                <div id="refrigeration" style="width: 100%; height: 90%"></div>
              </dv-border-box-10>
            </div>
          </div>
          <!-- 第三行 -->
          <div class="content2" style="margin-top: 20px">
            <div class="border-box-content">
              <dv-border-box-8 :reverse="true">
                <span>86盒测温度</span>
                <div id="data" style="width: 100%; height: 90%"></div>
              </dv-border-box-8>
            </div>
            <div class="border-box-content">
              <dv-border-box-8>
                <span>86盒测湿度</span>
                <div id="check" style="width: 100%; height: 90%"></div>
              </dv-border-box-8>
            </div>
          </div>
        </div>
      </div>
   
  </template>
  
  <script>
  import screenfull from 'screenfull'
  import * as echarts from "echarts";
  import { tempList, baiyexiangAPI,lightAPI } from "@/api/system/cockpit"
  export default {
    data() {
      return{
        now:'2022/11/22',
        // 全屏显示
        // isFullFlag:false,
        // 订单
        config1: {
          columnWidth: [], // 分别对应列宽
          align: "left", //文字对齐方式
          data: [],
          
        },
        config2: {
          header: [], //表头数据
          columnWidth: [], // 分别对应列宽
          align: "left", //文字对齐方式
          data: [],
        
        },
        // 能耗
        config3: {
          data:[]
        },
        // 昨日能耗
        yesterday: '',
        // 上月能耗
        lastmonth: '',
        loading: false, //加载
        date: new Date().getTime(),
      }
    },
    mounted() {
      // this.getorderList();
      this.getEnergy();
      this.getOilList();
      this.cold();
      this.dataAll();
      this.check();
      // 监听页面全屏
      const element=document.getElementById('content');
      document.getElementById('full').addEventListener('click',()=>{
        if(screenfull.isEnabled){
          screenfull.request(element)
        }
      })
  
  // 测试学习调用
      // this.orders();
      // this.ordersListTest()
    },
    created() {
      this.loadTime();
    },
    methods: {
      
      // 订单列表
      // getorderList() {
      //   baiyexiangAPI(this.now).then(res => {
      //     // console.log(res);
      //     let orderAll = [];
      //     // res.data.map(item => {
      //     //   orderAll.push([item.wdr, item.partNo, item.orderDescribe,item.orderState,item.progress,item.yield])
      //     // });
      //     this.config1={
      //       data: orderAll,
      //       columnWidth: [300, 250, 400, 200, 250, 250], 
      //       align: "left",
      //       rowNum: 3,
      //       headerHeight: 40, //表头
      //       oddRowBGC: 'rgba(0,0,0,0)', //奇数行
      //       evenRowBGC: 'rgba(23,28,51,0.8)', //偶数行
      //       waitTime:5000
      //     }
      //   })
      //   baiyexiangAPI(this.now).then(res => {
      //     let orderAll = [];
      //     // res.data.map(item => {
      //     //   orderAll.push([item.wdr, item.partNo, item.orderDescribe,item.orderState,item.progress,item.yield])
      //     // });
      //     this.config2={
      //       header: ['wdr号', '零件号', '订单名称','订单状态','订单进度','合格率'],
      //       data: orderAll,
      //       columnWidth: [300, 250, 400, 200, 250, 250], 
      //       align: "left",
      //       rowNum: 1,
      //       headerHeight: 40,
      //       headerBGC: '#244278', //表头
      //       oddRowBGC: 'rgba(0,0,0,0)', //奇数行
      //       evenRowBGC: 'rgba(23,28,51,0.8)', //偶数行
      //     }
      //   })
      // },
      // 光照
      getEnergy() {
        // 百叶箱光照
        lightAPI(this.now).then(res => {
          console.log(res);
          var chartDom = document.getElementById('light');
        
        var myChart = echarts.init(chartDom);
        
        let option = {
          
          visualMap: [
            {
              show: false,
              type: 'continuous',
              seriesIndex: 0,
              min: 0,
              max: 400
            },
          ],
          // 图表标题
          title: {
            // text: '当日温度变化曲线图',
            // left: 'center',
  
  
          },
          tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
            trigger: 'axis',
            axisPointer: {
              // 坐标轴虚线
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            // backgroundColor: 'rgba(32, 33, 36,.7)',
            // borderColor: 'rgba(32, 33, 36,0.20)',
            // borderWidth: 1,
            // // 文字提示样式
            // color: '#fff',
            // fontSize: '12',
  
  
          },
  
          // 维度
          legend: {
            orient: 'vertical',
            data: ['温度(℃)'],
            textStyle:{
              color:'#fff'
            }
            
  
          },
          // x轴
          xAxis: {
            data: res.data[1]
          },
          // y轴
          yAxis: {
  
          },
          grid: [
            {
              top: '20%',
              bottom: '30%'
            },
          ],
          series: [{
            // 与标题一致
            name: '温度(℃)',
            // 图表类型
            type: 'line',
            // showSymbol: false,
            //   markLine: {
            //   data: [{ type: "average", name: "Avg" }],
            // },
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            //数据内容 
            data: res.data[0],
            label: {
              color: 'black',
  
              formatter: function (params) {
                return (params.value)
              },
              // show: true // 在折线拐点上显示数据
            },
            lineStyle: {
              //  normal : {
              //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              //       offset: 0,
              //       color: '#ad91ed'
              //     },
              //     {
              //       offset: 0.9,
              //       color: '#c8eeeb'
              //     }]),
              //     areaStyle: {
  
              //       type: 'default'
              //     }
              //   }
            },
  
          }],
          // 使用刚指定的配置项和数据显示图表。
  
        };
      
        // window.onresize = myChart.resize;
        window.addEventListener("resize", function () {
          myChart.resize();
          // myChartSex2.resize();
        });
        option && myChart.setOption(option);
        });
        // 总计
        // energyAll().then(res => {
        //   this.yesterday = res.data[0].consumption
        //   this.lastmonth = res.data[1].consumption
        // })
      },
      // 百叶箱温度
      getOilList() {
        baiyexiangAPI(this.now).then(res => {
          console.log(res);
          var chartDom = document.getElementById('oil');
        
          var myChart = echarts.init(chartDom);
          
          let option = {
            
            visualMap: [
              {
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
              },
            ],
            // 图表标题
            title: {
              // text: '当日温度变化曲线图',
              // left: 'center',
  
  
            },
            tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
              trigger: 'axis',
              axisPointer: {
                // 坐标轴虚线
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              },
              // backgroundColor: 'rgba(32, 33, 36,.7)',
              // borderColor: 'rgba(32, 33, 36,0.20)',
              // borderWidth: 1,
              // // 文字提示样式
              // color: '#fff',
              // fontSize: '12',
  
  
            },
  
            // 维度
            legend: {
              orient: 'vertical',
              data: ['温度(℃)'],
              textStyle:{
              color:'#fff'
            }
              
  
            },
            // x轴
            xAxis: {
              data: res.data[2]
            },
            // y轴
            yAxis: {
  
            },
            grid: [
              {
                top: '20%',
                bottom: '30%'
              },
            ],
            series: [{
              // 与标题一致
              name: '温度(℃)',
              // 图表类型
              type: 'line',
              // showSymbol: false,
              //   markLine: {
              //   data: [{ type: "average", name: "Avg" }],
              // },
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              //数据内容 
              data: res.data[0],
              label: {
                color: 'black',
  
                formatter: function (params) {
                  return (params.value)
                },
                // show: true // 在折线拐点上显示数据
              },
              lineStyle: {
                //  normal : {
                //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                //       offset: 0,
                //       color: '#ad91ed'
                //     },
                //     {
                //       offset: 0.9,
                //       color: '#c8eeeb'
                //     }]),
                //     areaStyle: {
  
                //       type: 'default'
                //     }
                //   }
              },
  
            }],
            // 使用刚指定的配置项和数据显示图表。
  
          };
        
          // window.onresize = myChart.resize;
          window.addEventListener("resize", function () {
            myChart.resize();
          // myChartSex2.resize();
        });
         
          option && myChart.setOption(option);
          
        })
      },
  
      // 百叶箱湿度
      cold() {
        baiyexiangAPI(this.now).then(res => {
          let cold = echarts.init(document.getElementById('refrigeration'))
          let option = {
              visualMap: [
              {
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
              },
            ],
            // 图表标题
            title: {
              // text: '当日湿度变化曲线图',
              // left: 'center',
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            // 维度
            legend: {
              orient: 'vertical',
              // x:'70',
              // y:'50',
              data: ['湿度(%)'],
              textStyle:{
              color:'#fff'
            }
  
            },
            // x轴
            xAxis: {
              data: res.data[2]
            },
            // y轴
            yAxis: {
  
            },
            grid: [
              {
  
                top: '20%',
                bottom: '30%'
              },
            ],
            series: [{
              // 与标题一致
              name: '湿度(%)',
              // 图表类型
              type: 'line',
              // showSymbol: false,
              // 平均的线
              //   markLine: {
              //   data: [{ type: "average", name: "Avg" }],
              // },
              // 最大最小值高亮
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              //数据内容 
              data: res.data[1],
              label: {
  
                color: 'black',
                formatter: function (params) {
                  return (params.value)
                },
                // show: true // 在折线拐点上显示数据
              },
              lineStyle: {
                // normal: {
  
                //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                //     offset: 0,
                //     color: '#2FE0D4'
                //   },
                //   {
                //     offset: 0.9,
                //     color: '#c37fee'
                //   }]),
                //   areaStyle: {
  
                //     type: 'default'
                //   }
                // }
              }
  
  
  
  
  
  
            }],
            // 使用刚指定的配置项和数据显示图表。
  
          };
          // window.onresize = cold.resize;
          window.addEventListener("resize", function () {
            cold.resize();
          // myChartSex2.resize();
        });
          option && cold.setOption(option);
        })
      },
  
      // 86盒温度
      dataAll() {
        tempList(this.now).then(res => {
          console.log(res);
          let data = echarts.init(document.getElementById('data'))
  
          // window.onresize = function() {
          //   data.resize(); };
          let option = {
              visualMap: [
              {
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
              },
            ],
            // 图表标题
            title: {
              // text: '当日湿度变化曲线图',
              // left: 'center',
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            // 维度
            legend: {
              orient: 'vertical',
              // x:'70',
              // y:'50',
              data: ['湿度(%)'],
              textStyle:{
              color:'#fff'
            }
  
            },
            // x轴
            xAxis: {
              data: res.data[2]
            },
            // y轴
            yAxis: {
  
            },
            grid: [
              {
  
                top: '20%',
                bottom: '30%'
              },
            ],
            series: [{
              // 与标题一致
              name: '湿度(%)',
              // 图表类型
              type: 'line',
              // showSymbol: false,
              // 平均的线
              //   markLine: {
              //   data: [{ type: "average", name: "Avg" }],
              // },
              // 最大最小值高亮
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              //数据内容 
              data: res.data[1],
              label: {
  
                color: 'black',
                formatter: function (params) {
                  return (params.value)
                },
                // show: true // 在折线拐点上显示数据
              },
              lineStyle: {
                // normal: {
  
                //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                //     offset: 0,
                //     color: '#2FE0D4'
                //   },
                //   {
                //     offset: 0.9,
                //     color: '#c37fee'
                //   }]),
                //   areaStyle: {
  
                //     type: 'default'
                //   }
                // }
              }
  
  
  
  
  
  
            }],
            // 使用刚指定的配置项和数据显示图表。
  
          };
          // window.onresize = data.resize;
         window.addEventListener("resize", function () {
            data.resize();
          //  myChartSex2.resize();
        });
          option && data.setOption(option);
        })
      },
  
      // 点检情况
      check() {
        tempList(this.now).then(res => {
          let data = echarts.init(document.getElementById('check'));
          window.onresize = function() {
            data.resize(); };
            let option = {
              visualMap: [
              {
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
              },
            ],
            // 图表标题
            title: {
              // text: '当日湿度变化曲线图',
              // left: 'center',
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            // 维度
            legend: {
              orient: 'vertical',
              // x:'70',
              // y:'50',
              data: ['湿度(%)'],
              textStyle:{
              color:'#fff'
            }
            },
            // x轴
            xAxis: {
              data: res.data[2]
            },
            // y轴
            yAxis: {
  
            },
            grid: [
              {
  
                top: '20%',
                bottom: '30%'
              },
            ],
            series: [{
              // 与标题一致
              name: '湿度(%)',
              // 图表类型
              type: 'line',
              // showSymbol: false,
              // 平均的线
              //   markLine: {
              //   data: [{ type: "average", name: "Avg" }],
              // },
              // 最大最小值高亮
              markPoint: {
                data: [
                  { type: "max", name: "Max" },
                  { type: "min", name: "Min" },
                ],
              },
              //数据内容 
              data: res.data[1],
              label: {
  
                color: 'black',
                formatter: function (params) {
                  return (params.value)
                },
                // show: true // 在折线拐点上显示数据
              },
              lineStyle: {
                // normal: {
  
                //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                //     offset: 0,
                //     color: '#2FE0D4'
                //   },
                //   {
                //     offset: 0.9,
                //     color: '#c37fee'
                //   }]),
                //   areaStyle: {
  
                //     type: 'default'
                //   }
                // }
              }
  
  
  
  
  
  
            }],
            // 使用刚指定的配置项和数据显示图表。
  
          };
          // window.onresize = data.resize;
          option && data.setOption(option);
        })
      },
  
      // 时间
      loadTime() {
        var _this = this;
        setInterval(() => {
          _this.date += 1000;
        }, 1000);
      },
      // 转换时间戳
      formateTimeStamp(time) {
        var date = new Date(time);
        var year = date.getFullYear();
        var month =date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1): date.getMonth() + 1;
        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minute =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var second =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
        return (
          '<span style="font-size: 55px; float:left; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.6);">' +
          hour +
          ":" +
          minute + ":" + second +
          "</span>" +
          '<span style="font-size: 16px; display:inline-block; margin-top:8px; padding-left:10px">'+
          year +
          "年" +
          month +
          "月" +
          day +
          "日" +
          '</span><br />'+
          "&nbsp;&nbsp;&nbsp;星期" +
          week
        );
      },
    }
  }
  </script>
  
  <style scoped>
  @import '../../../assets/styles/cockpitindex.scss';
  </style>